<template>
  <div class="countDown">
    <a href="javascript:;" class="time">{{time | change}}</a>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        time: '获取验证码'
      }
    },
    props: {
      start: {
        type: Boolean
      }
    },
    watch: {
      start(value, oldValue) {
        if (value) {
          this.countDown()
        }
      }
    },
    methods: {
      countDown() {
        this.time = 60
        let time = setInterval(() => {
          this.time--
          if (this.time === 0) {
            this.eventBus.$emit('countDown', false)
            this.time = '获取验证码'
            clearInterval(time)
          }
        }, 1000)
      }
    },
    filters: {
      change(value) {
        if (value === '获取验证码') {
          return value
        } else {
          return `重新发送（${value}s）`
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .countDown
    .time
      white-space nowrap
      color #fff
</style>
